<template>
    <div>
        <!-- 电影展示组件 start -->
        <!-- <router-link tag="div" class="film-item"
             v-for="film in list" :key="film.filmId"
             :to=" `/detail?filmId=${ film.filmId }`"
        > -->
        <!-- <router-link tag="div" class="film-item"
             v-for="film in list" :key="film.filmId"
             :to=" `/detail/${ film.filmId }.html`"
        > -->
         <router-link tag="div" class="film-item"
             v-for="film in list" :key="film.filmId"
             :to=" {
                 name:'detail',
                 params:{
                     filmId:film.filmId
                 }
             } "
        >
            <div class="film-img" :style="`background-image: url(${ film.filmImg })`"></div>
            <div class="film-title">{{ film.filmName }}</div>
            <div class="film-source">
                <span class="star-img open"></span>
                <span class="star-img open"></span>
                <span class="star-img open"></span>
                <span class="star-img close"></span>
                <span class="star-img close"></span>
                <span class="star-source">{{ film.source }}</span>
            </div>
        </router-link>
        <!-- <div class="film-item" v-for="film in list" :key="film.filmId">
            <div class="film-img" :style="`background-image: url(${ film.filmImg })`"></div>
            <div class="film-title">{{ film.filmName }}</div>
            <div class="film-source">
                <span class="star-img open"></span>
                <span class="star-img open"></span>
                <span class="star-img open"></span>
                <span class="star-img close"></span>
                <span class="star-img close"></span>
                <span class="star-source">{{ film.source }}</span>
            </div>
        </div> -->
        <!-- 电影展示组件 end -->
    </div>
</template>
<script>
export default {
    props:{
        list:{
            type:Array,
            default(){
                return [];
            }
        }
    }
}
</script>
<style lang="less" scoped>
.film-item {
    width: 2.35rem;
    height: 4.55rem;
    display: inline-block;
    margin-left: 0.1rem;
    vertical-align: top;
    > .film-img {
        height: 3.6rem;
        background-color: @gray-light;
        background-repeat: no-repeat;
        background-size: cover;
    }
    > .film-title {
        font-size: 0.26rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin: 0.1rem;
    }
}
</style>